{{setTitle     "Pure中文版"}}
{{setSubTitle  "一个你可以应用到所有web项目的小巧的、响应式的CSS模块集"}}
{{setActiveNav "home"}}

{{addLocalCSS "/css/home.css"}}

<div class="hero">
    <h1 class="pure-u-1">{{title}}</h1>
    <h2 class="pure-u-3-4 l-centered">{{subTitle}}</h2>

    <div class="hero-cta pure-u-3-4">
    {{#code}}
        <link rel="stylesheet" href="http://yui.yahooapis.com/pure/{{pure_version}}/pure-min.css">
    {{/code}}

    <p>
        <a class="pure-button pure-button-cta" href="{{pages.customize}}">开始定制</a>
        <a class="pure-button pure-button-secondary" href="https://github.com/yui/pure/">查看源码</a>
    </p>
    </div>
</div>

<div class="pure-g-r marketing-ribbon">
    <div class="pure-u-1">
        <div class="size-chart l-vbox pure-g">
            <div class="size-chart-item size-chart-base pure-u" style="width: {{filePercent 'base'}};">
                <a class="size-chart-label" href="{{pages.base}}">
                    基本模块 <span class="size-chart-size">{{fileSize "base"}}</span>
                </a>
            </div>
            <div class="size-chart-item size-chart-grids pure-u" style="width: {{filePercent 'grids'}};">
                <a class="size-chart-label" href="{{pages.grids}}">
                    网格模块 <span class="size-chart-size">{{fileSize "grids"}}</span>
                </a>
            </div>
            <div class="size-chart-item size-chart-forms pure-u" style="width: {{filePercent 'forms'}};">
                <a class="size-chart-label" href="{{pages.forms}}">
                    表单模块 <span class="size-chart-size">{{fileSize "forms"}}</span>
                </a>
            </div>
            <div class="size-chart-item size-chart-buttons pure-u" style="width: {{filePercent 'buttons'}};">
                <a class="size-chart-label" href="{{pages.buttons}}">
                    按钮模块 <span class="size-chart-size">{{fileSize "buttons"}}</span>
                </a>
            </div>
            <div class="size-chart-item size-chart-tables pure-u" style="width: {{filePercent 'tables'}};">
                <a class="size-chart-label" href="{{pages.tables}}">
                    表格模块 <span class="size-chart-size">{{fileSize "tables"}}</span>
                </a>
            </div>
            <div class="size-chart-item size-chart-menus pure-u" style="width: {{filePercent 'menus'}};">
                <a class="size-chart-label" href="{{pages.menus}}">
                    菜单模块 <span class="size-chart-size">{{fileSize "menus"}}</span>
                </a>
            </div>
        </div>
        <div class="l-box">
            <h3>很小的CSS</h3>
            <p>
                Pure是相当小的，它的所有模块，压缩后只有<b>{{fileSize "pure"}}* </b>，并且依然保持着响应式的设计和易用性。保持文件的大小对移动设备来说非常重要，所以我们对每行CSS都进行了仔细的考虑。如果你决定只使用部分模块，你将会节省更多的字节。
            </p>

            <p style="font-size:small;">
                * 上面提到的文件大小是指：把各个模块组合在一起后，使用gzip压缩得到的。
            </p>
        </div>
    </div>
</div>

<div class="pure-g-r marketing-ribbon">
    <div class="pure-u-1-3">
        <div class="l-box">
            <h3>基础架构</h3>
            <p>
                Pure是建立在<a href="http://necolas.github.io/normalize.css/">Normalize.css</a>的基础上的，对HTML元素提供了布局和样式，增加了一些公共的并且是你需要的UI组件。
            </p>
        </div>
    </div>

    <div class="pure-u-1-3">
        <div class="l-box">
            <h3>可在移动设备上使用</h3>
            <p>
                Pure是响应式的，所以能适应各种屏幕大小的设备。你可以通过<a href="http://yui.github.io/skinbuilder/?mode=pure">皮肤编辑器</a>去定制你自己的样式</p>
        </div>
    </div>

    <div class="pure-u-1-3">
        <div class="l-box">
            <h3>保持你自己的风格</h3>
            <p>
                Pure只提供很简单的样式，鼓励你基于它去创建自己的样式。它的设计目标之一就是让你可以很简单地覆盖样式，去实现自己风格的样式。
            </p>
        </div>
    </div>
</div>


<div class="pure-g-r marketing-ribbon">
    <div class="pure-u-1-2">
        <div class="l-box">
            <a href="{{pages.layouts}}">
                <img src="img/layout-icon.jpg" alt="Diagram of a sample layout.">
            </a>
        </div>
    </div>

    <div class="pure-u-1-2">
        <div class="l-hbox">
            <h3>创建响应式布局</h3>
            <p>
                通过使用<a href="{{pages.grids}}">网格模块</a>, <a href="{{pages.menus}}">菜单模块</a>等，你可以很简单地在所有大小的屏幕上创建漂亮的响应式布局。你可以查看<a href="{{pages.layouts}}">布局模块</a>，用它你可以很快地开始你的项目，给你的项目打造一个很好的基础。
            </p>

            <p>
                <a href="{{pages.layouts}}" class="pure-button">查看布局模块</a>
            </p>
        </div>
    </div>
</div>

<div class="pure-g-r marketing-ribbon">
    <div class="pure-u-1-2">
        <div class="l-hbox">
            <h3>设计你自己的样式</h3>
            <p>
                跟其他框架相比，Pure的设计会让你更容易添加新的css规则去重写已经存在的规则。只需添加几行CSS代码，你就可以把你重写Pure的样式，展示到你的网站上。</p>

            <p>
                <a href="{{pages.extend}}" class="pure-button">扩展 Pure</a>
            </p>
        </div>
    </div>
    <div class="pure-u-1-2">
        <div class="l-box sample-buttons">
            <p>
                <button class="pure-button">灰色</button>
                <button class="pure-button pure-button-a">蓝色</button>
                <button class="pure-button pure-button-b">黄色</button>
            </p>
            <p>
                <button class="pure-button pure-button-c">黑色</button>
                <button class="pure-button pure-button-d">绿色</button>
                <button class="pure-button pure-button-e">红色</button>
            </p>
            <p>
                <button class="pure-button pure-button-f">紫色</button>
                <button class="pure-button pure-button-g">橙色</button>
                <button class="pure-button pure-button-h">青色</button>
            </p>
        </div>
    </div>
</div>
